<template>
  <el-card class="attr attrList">
    <el-form>
      <el-form-item label="属性名">
        <el-input class="attr-input" v-model="attrListDate.attrName" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :disabled="!attrListDate.attrName" @click="showAddAttrValue">添加属性值</el-button>
        <el-button>取消</el-button>
        <el-table border class="attr-table" :data="attrListDate.attrValueList">
          <el-table-column label="序号" width="60" type="index"></el-table-column>
          <el-table-column label="属性名称" prop="attrName">
            <template v-slot="{ row, $index }">
              <el-input ref="inputRf" v-if="row.isEdit" v-model="row.valueName" @blur="addAttr(row, $index)" />
              <span class="attr-span" v-else @click="showEdit(row)">{{ row.valueName }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150">
            <template v-slot="{ row, $index }">
              <el-popconfirm :title="`您确定删除${row.valueName}吗?`" @confirm="delAttr($index)">
                <template #reference>
                  <el-button :icon="Delete" type="danger" />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="IsDisabled" @click="saveOrUpdateAttr" >保存</el-button>
        <el-button @click="goAttrList">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "SaveAttrOrSetAttr",
};
</script>

<script lang="ts" setup>
import { Delete } from "@element-plus/icons-vue";
import { useCategoryStore } from "@/stores/category";
import { ref, reactive, nextTick, computed } from "vue";
import type { AttrListItem,attrValueListItem } from "@/api/product/model/attrModel";
import { getSaveAttrApi } from "@/api/product/attr";

import { ElMessage } from "element-plus";


const emit = defineEmits(["setIsShowAttrList"]);
//取消，跳转到AttrList组件
const goAttrList=()=>{
  emit('setIsShowAttrList', true)
}

const saveOrUpdateAttr = async () => {
 await getSaveAttrApi(attrListDate)
 ElMessage.success('属性添加成功')
 goAttrList()
}
const categoryStore=useCategoryStore()
const attrListDate = reactive<AttrListItem>({
  attrName: "",
  attrValueList: [],
  categoryId: categoryStore.category3Id as number,
  categoryLevel:3,
});
// 保存按钮是否禁用
const IsDisabled = computed(() => {
  return !attrListDate.attrName || !attrListDate.attrValueList.some((attrList) => attrList.valueName);
});

const inputRf = ref();
const showAddAttrValue = async () => {
  attrListDate.attrValueList.push({
isEdit: true,
valueName: ""
});
  await nextTick();
  inputRf.value.focus(); //获取焦点
};
//显示属性值
const addAttr = (row:attrValueListItem , index: number) => {
  if (!row.valueName) {
    attrListDate.attrValueList.splice(index, 1);
    return;
  }
  row.isEdit = false;
};

const showEdit = (row:attrValueListItem) => {
  row.isEdit = true;
};
const delAttr = (index: number) => {
  attrListDate.attrValueList.splice(index, 1);
};
</script>

<style scoped>
.attr-input {
  width: 200px;
}
.attr-table {
  margin: 20px;
}
.attrList {
  margin: 10px 0;
}
.attr-span {
  display: block;
  width: 100%;
}

</style>
